"use client";
import React from "react";
import { Button, Form, Input, Select, Space } from 'antd';

const { Option } = Select;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

export default function Lsy() {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({ note: 'Hello world!', gender: 'male' });
  };
  return (
    <div>
      <h3>修改密码</h3>
      <div>
        <Form
          {...layout}
          form={form}
          name="control-hooks"
          onFinish={onFinish}
          style={{ maxWidth: 600, margin: '0 auto',marginTop:'100px' }}
        >
          <Form.Item name="原登录" label="原登录" rules={[{ required: true, message: '请输入原登录密码!' }]}>
            <Input placeholder="原登录密码" />
          </Form.Item>
          <Form.Item name="新密码" label="新密码" rules={[{ required: true, message: '请输入新的登录密码!' }]}>
            <Input placeholder="新的登录密码" />
          </Form.Item>
          <Form.Item name="确认密码" label="确认密码" rules={[{ required: true, message: '请输入确认新的密码!' }]}>
            <Input placeholder="确认新的密码" />
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Space>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button htmlType="button" onClick={onReset}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  );

}
